<template>
  <!-- 业务逻辑：刚进来的时候，获取基本数据，但是不渲染列表，等用户选择要哪些数据的时候，再获取 -->
  <div class="invent_query_container">
    <!-- 第一行输入框 -->
    <div class="first_select_warp">
      <span>款号</span>
      <!-- 注释的是输入框手写输入的 -->
      <el-input
        class="customer_storage_input"
        v-model="styleNumberPullSelectValue"
        placeholder="多个款号以逗号隔开"
        @change="handleStyleNumberSelectChange"
        @input="handleStyleNumberInputToUpperCase"
      ></el-input>
      <!-- <el-select
        v-model="styleNumberPullSelectValue"
        placeholder="请选择"
        class="selection_container"
        @change="handleStyleNumberSelectChange"
      >
        <el-option
          v-for="item in styleNumberPullSelectValueList"
          :key="item.id"
          :label="item.styleNumber"
          :value="item.styleNumber"
        >
        </el-option>
      </el-select> -->
      <span>客户</span>
      <el-select
        v-model="clientPullSelectValue"
        placeholder="请选择"
        class="selection_container"
        multiple
        collapse-tags
        @change="handleClientNumberSelectChange"
      >
        <el-option
          v-for="item in clientPullSelectValueList"
          :key="item.id"
          :value="item.no"
        >
          <span style="float: left">{{ item.no }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{
            item.name
          }}</span>
        </el-option>
      </el-select>
      <span>仓库</span>
      <el-select
        v-model="manufacturerPullSelectValue"
        placeholder="请选择"
        class="selection_container"
        @change="handleManufacturerSelectChange"
        clearable
      >
        <el-option
          v-for="item in manufacturerPullSelectValueList"
          :key="item.id"
          :label="item.name"
          :value="item.no"
        >
        </el-option>
      </el-select>
      <span class="pinpai">品牌</span>
      <el-select
        v-model="brandPullSelectValue"
        placeholder="请选择"
        class="selection_container"
        multiple
        collapse-tags
        @change="handleBrandSelectChange"
      >
        <el-option
          v-for="item in brandPullSelectValueList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <!-- 客存结构 -->
      <div class="customer_storage">
        <span class="pinpai">客存</span>
        <el-input
          placeholder="请输入内容"
          class="customer_storage_input "
          v-model="customerStorageInputValue"
          @change="clientExistSelectChange"
        >
          <template slot="prepend">
            <span>>=</span>
          </template>
        </el-input>
      </div>
      <!-- 库存样式 -->
      <div class="kucun_warp">
        <span>库存</span>
        <el-input
          class="kucun_warp_input"
          v-model="inventoryInputValue"
          placeholder="请输入内容"
          @change="handleinventoryInputChange"
        >
          <template slot="prepend">
            <span>>=</span>
          </template>
        </el-input>
      </div>
      <!-- 控制多条件查询是否显示的输入框-->
      <el-checkbox
        v-model="checkboxSelectValue"
        label="多条件查询"
        border
        class="checkbox"
        @change="handleCheckBoxChange"
      ></el-checkbox>
    </div>
    <!-- 第一行输入框结束 -->
    <!-- 第二行输入框的开始 -->
    <div class="second_select_warp" v-if="checkboxSelectValue">
      <span>业务</span>
      <el-select
        v-model="businessPullSelectValue"
        multiple
        collapse-tags
        placeholder="请选择"
        @change="handleBusinessSelectChange"
      >
        <el-option
          v-for="item in businessPullSelectValueList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <span>季度</span>
      <el-select
        v-model="quarterPullSelectValue"
        multiple
        collapse-tags
        placeholder="请选择"
        @change="handleQuaterSelectChange"
      >
        <el-option
          v-for="item in quarterPullSelectValueList"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <!-- 大类 -->
      <span>大类</span>
      <el-select
        v-model="bigClassifyPullSelectValue"
        placeholder="请选择"
        multiple
        collapse-tags
        @change="handleBigClassifySelectChange"
      >
        <el-option
          v-for="item in bigClassifyPullSelectValueList"
          :key="item.is"
          :label="item.type"
          :value="item.no"
        >
        </el-option>
      </el-select>
      <!-- 实际销量 -->
      <span class="shijixiaoliang">实际销量</span>
      <el-input
        placeholder="请输入内容"
        v-model="actualSalesInputvalue"
        @change="handleActualSalesInputChange"
      >
        <template slot="prepend">
          <span>>=</span>
        </template>
      </el-input>
      <!-- 实际进量 -->
      <span class="shi_ji_jin_liang">实际进量</span>
      <el-input
        placeholder="请输入内容"
        v-model="actualIntoInputValue"
        @change="handleactualIntoInputChange"
      >
        <template slot="prepend">
          <span>>=</span>
        </template>
      </el-input>
      <!-- 日期 -->
      <div class="block">
        <span class="demonstration">日期</span>
        <el-date-picker
          v-model="selectDataList"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="handleDataSelectChange"
        >
        </el-date-picker>
      </div>
    </div>

    <!-- 第二行输入框的结束 -->
    <!-- 间隔线 -->
    <p class="inline"></p>
    <!-- 按钮区域 -->
    <div class="three_button_warp">
      <!-- 左边按钮区域 -->
      <div class="left_button">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQueryDataBtn"
          >查询</el-button
        >
        <el-button icon="el-icon-upload2" @click="handleExportBtnClick"
          >导出</el-button
        >
        <el-button icon="el-icon-printer" v-print="'#ipt'">列印</el-button>
        <el-button
          icon="el-icon-copy-document"
          class="shaixuanxinghao_btn"
          disabled
          >筛选型号</el-button
        >
      </div>
      <!-- 右边按钮区域 -->
      <div class="right_button">
        <!-- 复选框组 -->
        <el-checkbox
          label="客户合计"
          border
          size="small"
          @change="handleCheckBoxSelectChage_01"
        ></el-checkbox>
        <el-checkbox
          label="总店合计"
          border
          size="small"
          @change="handleCheckBoxSelectChage_02"
        ></el-checkbox>
        <!-- 新增的总存合计 -->
        <el-checkbox
          label="总存合计"
          border
          size="small"
          @change="handleCheckBoxSelectChage_04"
        ></el-checkbox>
        <el-checkbox
          label="二维"
          v-model="isSelectTwo_Wei"
          border
          size="small"
          @change="handleCheckBoxSelectChage_03"
        ></el-checkbox>
        <el-checkbox
          label="查看大图"
          border
          size="small"
          v-model="isShowBigImgBySelect"
        ></el-checkbox>
      </div>
    </div>
    <!-- 第三行结束 -->
    <!-- 表格开始的结构  大表格（查询表格）-->
    <QueryTableAll
      id="ipt"
      :queryTableAllDataList="queryTableAllDataList"
      v-if="six"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />
    <!-- 客户合计组件表格 -->
    <TotalCustomerTable
      v-if="one"
      :queryTableAllDataList="queryTableAllDataList"
      id="ipt"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />

    <!-- 总店合计组件表格 -->
    <TotalStoreTable
      :queryTableAllDataList="queryTableAllDataList"
      id="ipt"
      v-if="two"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />

    <!-- 二维表组件表格 -->
    <TwoDimensionTable
      :queryTableAllDataList="queryTableAllDataList"
      id="ipt"
      v-if="three"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />
    <!-- 总存合计表格 -->
    <AllExcitAllCountTable
      id="ipt"
      :queryTableAllDataList="queryTableAllDataList"
      v-if="four"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />
    <!-- 当总存合计 + 二维表格被点击的时候，显示这个表格 -->
    <AllExcitAddTwoDimensionTable
      id="ipt"
      :queryTableAllDataList="queryTableAllDataList"
      v-if="allAddTwoTable"
      :checkboxSelectValue="checkboxSelectValue"
      @addImageUrlGiveTatherComponent="addImageUrlGiveTatherComponent"
    />
    <!-- 分页的区域 -->
    <div class="pagination_container">
      <el-pagination
        background
        layout="prev, pager, next,jumper,sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        :page-sizes="[30, 40, 50, 60]"
      >
      </el-pagination>
    </div>
    <!-- 显示图片 -->
    <!-- 通过v-show来决定是否显示这个图片容器 -->
    <div
      id="pic"
      v-show="isShowBigImgBySelect"
      @mousedown="mounted"
      ref="pic_container_ref"
    >
      <div class="pic-top">
        <p>显示图片({{ sonGiveStyleNumber }})</p>
        <i class="el-icon-close" @click="closeBigImgBySelectContainer"></i>
      </div>
      <div>
        <img style="width:300px;height:355px;" :src="imageUrl" />
      </div>
    </div>
  </div>
</template>

<script>
// 导入excel公共导出方法(后端)
import { exportExcel } from '../../../util/exportExcel.js'
// 导入格式化时间的moment模块
var moment = require('moment')
// 引入要导出excel的保存函数（前端）
import htmlToExcel from '../../../util/htmlToExcel.js'
// var data = new Date();
// console.log(moment(data).format("MM-DD-YYYY"));
// 接口的引入
import {
  getAllInventoryDataApi,
  getBrandDataApi,
  get_chuang_shang_DataApi,
  get_ji_du_DataApi,
  get_big_class_DataApi,
  get_ke_hu_DataApi,
  get_ye_wu_DataApi,
  get_kuan_hao_DataApi,
  export_excel_dataApi
} from '../../../request/inventory/inventory_statement.js'
/*
    组件的引入
*/
import QueryTableAll from './ChildComps/QueryTableAll.vue'
import TotalCustomerTable from './ChildComps/TotalCustomerTable.vue'
import TwoDimensionTable from './ChildComps/TwoDimensionTable.vue'
import TotalStoreTable from './ChildComps/TotalStoreTable.vue'
import AllExcitAllCountTable from './ChildComps/AllExcitAllCountTable.vue'
import AllExcitAddTwoDimensionTable from './ChildComps/AllExcitAddTwoDimensionTable.vue'
export default {
  name: 'InventoryQuery',

  data() {
    return {
      // 是否选择了二维v-modle绑定的值
      isSelectTwo_Wei: false,
      // 这个两个都是相加 == 2的时候，才显示总存合计+二维表
      show_all_Existent: 0,
      show_er_wei: 0,
      allAddTwoTable: false, // 当总存合计+ 二维被点击的时候，应该变成true,并且显示这个表格
      allAddTwoNmae: false, // 这个是true 的话，直接导出 '总存合计 + 二维表格'名字 ； 名字是一个字段，显示这个表格也是一个字段，用两个字段的目的，是便于控制
      // 导出表格的文件名字
      excelExportFileName: '库存一维表.xlsx',
      // 显示大图的checkbox是否被选中，true被选中，false没有选中
      sonGiveStyleNumber: '', // 接收子组件传过来的款号，在显示大图的时候用到
      isShowBigImgBySelect: false, // 是否显示查看大图
      imageUrl: '',
      // 按需显示表格的字段
      six: true, // 控制大表格是否显示
      one: false, // 控制客户合计表格是否显示
      two: false, // 控制总店合计表格是否显示
      three: false, // 控制二维表格是否显示
      four: false, // 控制总存合计表格是否显示
      // 接收款号改变的字段，因为要填写的是大写才行
      styleNumberListStr: '',
      // radio单选框选中的值
      radioSelectValue: '',
      // 多条件查询的选择框绑定的值
      checkboxSelectValue: false,
      // 款号输入框输入的值
      styleNumberInputValue: '',
      // 客户下拉框的选择的值和下拉框数组
      clientPullSelectValue: '',
      clientPullSelectValueList: [],
      // 仓库下拉框选择的值和数组
      manufacturerPullSelectValue: '',
      manufacturerPullSelectValueList: [],
      // 品牌下拉框选择的值和数组
      brandPullSelectValue: '',
      brandPullSelectValueList: [],
      // 客存下拉框选择的值和数组
      customerStoragePullSelectValue: '',
      customerStoragePullSelectValueList: [
        { lable: '>=', value: '>=' },
        { lable: '=', value: '=' },
        { lable: '=<', value: '=<' }
      ],
      // 客存输入框输入的值
      customerStorageInputValue: '',

      // 库存输入框的值
      inventoryInputValue: '',
      // 业务下拉框选择的值和数组
      businessPullSelectValue: '',
      businessPullSelectValueList: [],
      // 季度下拉框选择的数据和数组
      quarterPullSelectValue: '',
      quarterPullSelectValueList: [],
      // 大类下拉框选择的值和数组
      bigClassifyPullSelectValue: '',
      bigClassifyPullSelectValueList: [],
      // 实际销量输入框输入的值
      actualSalesInputvalue: '',
      // 实际进量输入框输入的值
      actualIntoInputValue: '',
      // 日期选中的值,有两个是一个数组
      selectDataList: [],
      // 款号下拉框的选中的值和数组
      styleNumberPullSelectValue: '',
      styleNumberPullSelectValueList: [],

      // 分页的总条数
      total: 1,
      // 大表格的数据数组(所有表格的数据)
      queryTableAllDataList: [],
      // 下载表格的时候，表格的名字
      exportExcelName: '仓库表',
      // 点击不同的单选框按钮，渲染不同的表格
      isShowDiffentTable: 5, // 5是大表格
      // 点击查询的时候，要传给后端的参数对象
      paramsObj: {
        totalStock: false, // 总存开关,false代表关闭总存，true证明要总存
        actualAmount: '', // 实进量
        actualSell: '', // 实销量
        brandedNameList: [], // 品牌名称数组
        businessList: [], // 业务数组
        commodityNameList: [], // 品名名称数组
        commodityTypeList: [], // 大类（部类编号）数组
        customerNoList: [], // 客户编号数组 (客户)
        customerRepertory: '', // 客存 >=
        endDate: '', // 结束日期(yyyy-MM-dd HH:mm:ss)
        factoryRepertory: '', // 库存 >=
        headquartersNo: '', // 总店编号
        isExport: false, // 是否导出
        isCustomerTotal: 0, // 客户合计 0未开启1开启
        isHeadquartersTotal: 0, // 总店合计 0未开启1开启
        isRepertoryZero: '', // 累计 <> 0 (库存>0) 0未开启1开启
        kindsNumberList: [], //  货号数组
        limit: 30, // 分页条数
        page: 1, // 当前的页码
        quartIdList: [], // 季度id数组
        quartNameList: [], // 季度名称数组
        selectType: 1, // 查询类型 1：一维表 2：二维表
        softwareCustomerId: '', // 软件客户id
        startDate: '', // 开始日期(yyyy-MM-dd HH:mm:ss)
        styleNumberList: [], //型号(款号)数组，多个款号用 ','分割
        type: '', // 身份（0客户1厂商）
        warehouseNo: '' // 仓库编号
      }
    }
  },
  created() {
    // 调用获取品牌数据的方法
    this.getBrandDataApi()
    this.get_chuang_shang_DataApi()
    this.get_ji_du_DataApi()
    this.get_big_class_DataApi()
    this.get_ke_hu_DataApi()
    this.get_ye_wu_DataApi()
    this.get_kuan_hao_DataApi()
  },
  methods: {
    // 监听子组件传过来的点击单击当行表格的时候传过来的数据
    addImageUrlGiveTatherComponent(imgurl, styleNumber) {
      this.imageUrl = imgurl
      this.sonGiveStyleNumber = styleNumber
    },
    // 点击显示大图里面的关闭按钮，关闭显示大图的容器
    closeBigImgBySelectContainer() {
      this.isShowBigImgBySelect = false
    },
    // 这个是控制显示大图弹出层移动的逻辑
    mounted(e) {
      // let pic = document.getElementById("pic");
      // 和上面一样，都是拿到对应的DOM对象
      let pic = this.$refs['pic_container_ref']
      // console.log(e.clientX, e.clientY); // 这个是获取在页面中的的坐标点
      // console.log(pic.offsetLeft, pic.offsetTop); // 这个是容器距离left和top的距离（坐标）
      // 相减就是，鼠标相对于容器的距离（坐标）
      let rex = e.clientX - pic.offsetLeft
      let rey = e.clientY - pic.offsetTop
      document.onmousemove = e => {
        let xX = 0
        let yY = 0
        xX = e.clientX
        yY = e.clientY
        // 页面的坐标，减去鼠标相对于容器的距离 就是应该赋值给容器的left和top
        pic.style.left = xX - rex + 'px'
        pic.style.top = yY - rey + 'px'
      }

      document.onmouseup = () => {
        document.onmousemove = null
      }
    },
    // 当复选框被点击的时候，触发这个函数
    handleCheckBoxSelectChage_01(val) {
      // 每次点击的时候，都要判断这三个输入框是否被点击，如果是的话，那么久直接return
      if (this.two || this.three || this.four) return
      this.one = false
      this.two = false
      this.three = false
      this.four = false
      this.six = false
      if (val) {
        // val == true,证明用户点击选中
        this.one = true // 那么让one表格显示
        this.excelExportFileName = '客户合计表格.xlsx'
        // this.exportExcelName = '客户合计'（前端）
        // 开启客户合计
        this.paramsObj.isCustomerTotal = 1
        this.handleQueryDataBtn(this.paramsObj)
        // 关闭客户合计
        this.paramsObj.isCustomerTotal = 0
      } else {
        // 否则就是没有点击，没有点击应该显示大表格
        this.six = true
        this.excelExportFileName = '库存一维表.xlsx'
        // six代表大表格，重新渲染
        this.handleQueryDataBtn(this.paramsObj)
      }
    },
    handleCheckBoxSelectChage_02(val) {
      if (this.one || this.three || this.four) return
      this.one = false
      this.two = false
      this.three = false
      this.four = false

      this.six = false
      if (val) {
        // val == true,证明用户点击选中
        this.two = true
        this.excelExportFileName = '总店合计表格.xlsx'
        // 当显示全部数据的时候，应该把客户合计，总店合计，二维都关闭

        // this.exportExcelName = '总店合计'
        // 开启总店合计
        this.paramsObj.isHeadquartersTotal = 1
        this.handleQueryDataBtn(this.paramsObj)
        // 拿到数据，关闭总店合计
        this.paramsObj.isHeadquartersTotal = 0
      } else {
        // 否则就是没有点击，没有点击应该显示大表格
        this.six = true
        this.excelExportFileName = '库存一维表.xlsx'
        // six代表大表格，重新渲染
        this.handleQueryDataBtn(this.paramsObj)
      }
    },

    handleCheckBoxSelectChage_03(val) {
      // 调用二维的方法
      this.two_wei_methods(val)
    },
    // 点击总存合计的选择发生变化的时候，触发的函数
    handleCheckBoxSelectChage_04(val) {
      // 点击的时候，如果是val = true，证明这个被选中，那么就show_all_Existenti === 1

      if (val) {
        this.show_all_Existent = 1
      } else {
        // 这里必须要改成0，否则取消再点击二维的时候，会直接用总存 + 二维表格
        this.show_all_Existent = 0
        this.allAddTwoTable = false
      }

      // 每一个被选中的时候，都要判断一下，是否被选中了总内合计 + 二维，如果是的话，就不在执行下面的if
      if (this.show_er_wei + this.show_all_Existent === 2) {
        // 证明 只选中了这两个，所以可以显示这个表格，其他的表格关闭

        // if (this.allAddTwoTable) {
        console.log('可以显示这个表格了')
        // 这两个开启之后，就是拿总存合计 + 二维表格
        this.paramsObj.totalStock = true
        this.paramsObj.selectType = 2
        this.handleQueryDataBtn(this.paramsObj)
        // 开启这字段，目的是为了导出表格的时候，用这个名字
        this.allAddTwoTable = true
        // 表格的名字变成
        this.excelExportFileName = '总存合计 + 二维表格'
        // 拿到数据之后，关闭
        // 现在点击的是总存合计，是为了判断下一个该不该全部关闭下面这两个
        // this.paramsObj.totalStock = false
        // this.paramsObj.selectType = 1

        this.paramsObj.totalStock = false
        this.paramsObj.selectType = 1
        this.allAddTwoTable = true

        if (this.allAddTwoTable) {
          this.one = false
          this.two = false
          this.three = false
          this.four = false
          this.six = false
        }
        // 当显示表格的时候，要全部设置为0，防止重复点击还是能进来
        this.show_er_wei = 0
        this.show_all_Existent = 0
        // 显示这个表格之后，要return
        if (val === false) {
          // 二维还是被选中的状态
          if (this.isSelectTwo_Wei) {
            console.log('这个是自己的')
            this.two_wei_methods()
          }
          // 当总存合计变成false的时候
          console.log(this.isSelectTwo_Wei)
        }
        return
      }
      if (this.one || this.three || this.two) return
      this.one = false
      this.two = false
      this.three = false
      this.four = false
      this.six = false
      if (val) {
        // val == true,证明用户点击选中
        this.four = true
        this.excelExportFileName = '总存合计表格.xlsx'
        // 当显示全部数据的时候，应该把客户合计，总店合计，二维都关闭

        // this.exportExcelName = '总店合计'
        // 开启总店合计
        this.paramsObj.totalStock = true
        this.handleQueryDataBtn(this.paramsObj)
        // 拿到数据，关闭总存合计
        this.paramsObj.totalStock = false
      } else {
        // 否则就是没有点击，没有点击应该显示大表格
        this.six = true
        this.excelExportFileName = '总存合计表格.xlsx'
        // six代表大表格，重新渲染
        this.handleQueryDataBtn(this.paramsObj)
      }
    },

    // 点击查询按钮的时候，触发的api,默认获取所有的数据
    async handleQueryDataBtn() {
      // console.log(this.$qs.stringify(this.paramsObj));
      // console.log(this.paramsObj)
      // 对象还没有添加进去接口的参数 this.paramsObj
      const { data: res } = await getAllInventoryDataApi(this.paramsObj)
      console.log(res)
      // 请求成功，返回的数据是null,提醒一下用户，暂无数据
      if (res.code === 200 && res.data.length === 0) {
        this.queryTableAllDataList = [] // 查询成功之后，没有数据，要把原来表格的数据全部清空，并且提示用户，暂时无数据
        return this.$message.warning('暂无数据')
      }

      // 返回undefined
      if (!res) return
      // 请求不成功, 直接return
      if (res.code !== 200) return
      // 计算总条数
      this.total = res.total

      // 这个遍历的目的是，把对象中的所有的0，都设置为null,目的是为了不在表格中显示0 （双重for循环，第一层循环数组，第二个层遍历对象）,不用重新赋值赋值，会修改原来数组
      res.data.map(item => {
        for (const key in item) {
          if (item[key] === 0) {
            item[key] = null
          }
          // 这个是拼接颜色的
          if (key === 'colorName') {
            item[key] = item.colorNo + '-' + item.colorName
          }
          // 这个是拼接客户的
          if (item.customerName !== null && key === 'customerName') {
            item[key] = item.no + '-' + item.customerName
          }
        }
      })

      // 赋值给大表格数组数据
      this.queryTableAllDataList = res.data
    },

    // 获取款号的数据接口
    async get_kuan_hao_DataApi() {
      const { data: res } = await get_kuan_hao_DataApi([''])
      // console.log(res);
      if (res.code !== 200) return
      this.styleNumberPullSelectValueList = res.data
    },
    // 获取业务的数据接口
    async get_ye_wu_DataApi() {
      const { data: res } = await get_ye_wu_DataApi()
      // console.log(res);
      if (res.code !== 200) return
      this.businessPullSelectValueList = res.data
    },
    // 获取大类的接口
    async get_ke_hu_DataApi() {
      const { data: res } = await get_ke_hu_DataApi()
      // console.log(res);
      if (res.code !== 200) return
      this.clientPullSelectValueList = res.data
    },
    // 获取大类的接口
    async get_big_class_DataApi() {
      const { data: res } = await get_big_class_DataApi()
      // console.log(res);
      if (res.code !== 200) return
      this.bigClassifyPullSelectValueList = res.data
    },
    // 获取季度数据的接口
    async get_ji_du_DataApi() {
      const { data: res } = await get_ji_du_DataApi()
      // console.log(res);
      if (res.code !== 200) return
      this.quarterPullSelectValueList = res.data
    },
    // 获取仓库数据的接口
    async get_chuang_shang_DataApi() {
      const { data: res } = await get_chuang_shang_DataApi()
      if (res.code !== 200) return
      this.manufacturerPullSelectValueList = res.data
    },

    // 获取品牌数据的接口
    async getBrandDataApi() {
      const { data: res } = await getBrandDataApi()
      // console.log(res);
      // 获取不成功直接return
      if (res.code !== 200) return
      // 获取成功
      this.brandPullSelectValueList = res.data
    },

    // 点击页数发生改变的时候触发
    handleCurrentPageChange(val) {
      // 获取到当前的页数
      this.paramsObj.page = val
      // 发起ajax请求
      this.handleQueryDataBtn(this.paramsObj)
    },
    // // 每页显示多少条改变的时候触发
    handleSizeChange(size) {
      // console.log(size);
      this.paramsObj.limit = size
      // 发起ajax请求
      this.handleQueryDataBtn(this.paramsObj)
    },

    handleCheckBoxChange(value) {
      // console.log(value);
      this.checkboxSelectValue = value
    },

    /*
    在相应的框中获取相应的字段,数组要去在中括号和双引号，变成单纯的字符串文字

     */
    // 输入的时候，如果是字母都要变成大写，就不用监听watch
    handleStyleNumberInputToUpperCase(val) {
      // console.log(val);
      this.styleNumberPullSelectValue = val.toUpperCase().trim()
    },
    // 款号输入框发生改变的时候
    handleStyleNumberSelectChange(val) {
      // 这里可以直接赋值给参数对象,这里拿到的都是大写的字母，
      // console.log(val);
      this.paramsObj.styleNumberList = val.replace(/，/gi, ',')
    },
    // 客户下拉框改变的时候触发的函数
    handleClientNumberSelectChange(val) {
      // this.paramsObj.customerNoList = val;
      this.paramsObj.customerNoList = JSON.stringify(val)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')
    },
    // 仓库下拉框发生改变的时候触发
    handleManufacturerSelectChange(val) {
      this.paramsObj.warehouseNo = val
    },
    // 品牌下拉框发生改变的时候
    handleBrandSelectChange(val) {
      // this.paramsObj.brandedNameList = val;
      this.paramsObj.brandedNameList = JSON.stringify(val)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')
    },
    // 库存修改触发的函数
    handleinventoryInputChange(val) {
      this.paramsObj.factoryRepertory = val
    },
    // 客存输入框的值发生改变的时候
    clientExistSelectChange(val) {
      this.paramsObj.customerRepertory = val
    },
    // 业务下拉框选择改变的时候
    handleBusinessSelectChange(val) {
      // this.paramsObj.businessList = val;
      this.paramsObj.quartNameList = JSON.stringify(val)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')
    },
    // 季度下拉框选择的时候，触发的函数
    handleQuaterSelectChange(val) {
      // console.log(val)
      // 季度名称数组
      // this.paramsObj.quartNameList = val;
      this.paramsObj.quartNameList = JSON.stringify(val)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')
      //转数组去中括号
    },
    // 大类
    handleBigClassifySelectChange(val) {
      // this.paramsObj.commodityTypeList = val;
      this.paramsObj.commodityTypeList = JSON.stringify(val)
        .replace(/\[|]/g, '')
        .replace(/\"|"/g, '')
    },
    // 实际销量
    handleActualSalesInputChange(val) {
      this.paramsObj.actualSell = val
    },
    // 实际进量
    handleactualIntoInputChange(val) {
      this.paramsObj.actualAmount = val
    },
    // 选择的日期时间发生变化的时候，触发的函数
    handleDataSelectChange(dateArr) {
      // 组件选择时间的时候，只支持到天
      var data1 = new Date(dateArr[0])
      var data2 = new Date(dateArr[1])

      this.paramsObj.startDate =
        moment(data1).format('YYYY-MM-DD') + ' ' + '00:00:00'
      this.paramsObj.endDate =
        moment(data2).format('YYYY-MM-DD') + ' ' + '23:59:59'
    },
    // 点击导出的时候，触发的函数
    async handleExportBtnClick() {
      // console.log("ok");
      // 导出选中的table表格 (前端实现)
      // htmlToExcel.getExcel("#ipt", this.exportExcelName);
      // （下面是后端实现）
      this.paramsObj.isExport = true
      // 判断是否为二维表导出，three代表的是二维表被选中，如果是的话，就直接导出二维
      if (this.three) {
        this.paramsObj.selectType = 2
      }
      // 如果是one或者two或者six被选中，那么都应该导出一维表（下面不能注释掉，防止点击导出二维的时候，再继续点其他的）
      if (this.one || this.two || this.six) {
        // 否则直接导出一维
        this.paramsObj.selectType = 1
      }
      // 如果这个字段为true，证明 ‘总存合计 + 二维表格’被选中
      if (this.allAddTwoNmae) {
        this.totalStock = true
        this.paramsObj.selectType = 2
        // 关闭这个字段，防止别的导出也用这个文件名字
        this.allAddTwoNmae = false
      }
      // this.handleQueryDataBtn(this.paramsObj) 参数就修改这一个，用自己的导出接口
      // exportExcel 是一个请求接口，只是参数还是一样而已
      exportExcel(this.paramsObj, this.excelExportFileName)
      // 如果this.three == true,那么在导出完成之后，都要变成this.params.selectType = 1 这样也行
      this.paramsObj.isExport = false // 导出完成之后，都要修改成false
    },
    // 二维chenckbox发生改变的调用的函数
    two_wei_methods(val) {
      // 点击的时候，如果是val = true，证明这个被选中，那么就show_er_wei === 1
      if (val) {
        this.show_er_wei = 1
      } else {
        // 这里必须要改成0，否则取消再点击二维的时候，会直接用总存 + 二维表格
        this.show_er_wei = 0
        this.allAddTwoTable = false
      }
      // 每一个被选中的时候，都要判断一下，是否被选中了总内合计 + 二维，如果是的话，就不在执行下面的if
      if (this.show_er_wei + this.show_all_Existent === 2) {
        // 证明 只选中了这两个，所以可以显示这个表格，其他的表格关闭
        console.log('可以显示二维表格了')
        this.paramsObj.totalStock = true
        this.paramsObj.selectType = 2
        // 这两个开启之后，就是拿总存合计 + 二维表格
        this.handleQueryDataBtn(this.paramsObj)
        // 开启这字段，目的是为了导出表格的时候，用这个名字
        this.allAddTwoTable = true
        // 表格的名字变成
        this.excelExportFileName = '总存合计 + 二维表格'
        // 拿到数据之后，关闭
        this.paramsObj.totalStock = false
        this.paramsObj.selectType = 1
        this.allAddTwoTable = true
        if (this.allAddTwoTable) {
          this.one = false
          this.two = false
          this.three = false
          this.four = false
          this.six = false
        }
        // 显示完表格之后，要全部设置成0，防止重复点击还是能进来
        this.show_all_Existent = 0
        this.show_er_wei = 0
        // 显示这个表格之后，要return
        return
      }

      if (this.one || this.two || this.four) return
      this.one = false
      this.two = false
      this.three = false
      this.four = false

      this.six = false
      if (val) {
        // val == true,证明用户点击选中
        this.three = true
        this.excelExportFileName = '库存二维表格.xlsx'

        // this.exportExcelName = '二维表'
        this.paramsObj.selectType = 2
        // console.log(this.paramsObj)
        this.handleQueryDataBtn(this.paramsObj)
        //拿到数据关闭二维表
        this.paramsObj.selectType = 1
      } else {
        // 否则就是没有点击，没有点击应该显示大表格
        this.six = true
        this.excelExportFileName = '库存一维表.xlsx'
        // six代表大表格，重新渲染
        this.handleQueryDataBtn(this.paramsObj)
      }
    }
  },
  components: {
    QueryTableAll,
    TotalCustomerTable,
    TwoDimensionTable,
    TotalStoreTable,
    AllExcitAllCountTable,
    AllExcitAddTwoDimensionTable
  }
}
</script>

<style lang="less" scoped>
// 这是控制显示大图的弹出层的样式
#pic {
  position: absolute;
  width: 300px;
  height: 400px;
  box-shadow: 0 3px 3px 3px #f4f4f4;
  bottom: 10%;
  right: 5%;
  background: white;
  z-index: 100;
}
.pic-top {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  background: #f4f4f4;
}
.pic-top p {
  font-weight: 700;
}
.invent_query_container {
  // 分页样式
  .pagination_container {
    // 定位的问题
    margin-top: 10px;
    .el-pagination {
      flex: 1;
      text-align: right;
      // margin-left: auto;
      /deep/.el-pagination__sizes {
        .el-input__inner {
          width: 110px;
        }
      }
    }
  }
  min-width: 1200px;
  background-color: #fff;
  padding: 16px;
  .first_select_warp {
    display: flex;
    align-items: center;
    .pinpai {
      margin-left: 42px;
    }
    // 多条件查询多选框的样式
    .checkbox {
      width: 125px;
      height: 31px;
      line-height: 0;
      margin-left: 17px;

      /deep/.el-checkbox__label {
        line-height: 0;
      }
    }
    // 修改款号的样式
    .customer_storage_input {
      width: 160px;
      height: 32px;
      margin-right: 17px;
      /deep/.el-input__inner {
        height: 32px;
      }
    }
    .el-select {
      width: 160px;
      height: 32px;
      margin-right: 17px;
      /deep/ .el-input--suffix {
        height: 32px;
        .el-input__inner {
          height: 32px;
        }
        // 解决小图标箭头不居中的问题
        .el-input__icon {
          line-height: unset;
        }
      }
    }
    span {
      width: 40px;
      font-size: 16px;
      margin-right: 0px;
      text-align: center;
    }
    // 客存样式，自带的外层容器
    .customer_storage {
      display: flex;
      align-items: center;
      .selection_container {
        margin-right: 8px;
        width: 64px;
      }
      .el-input--suffix {
        width: 62px;
      }
      .customer_storage_input {
        height: 32px;
        width: 162px;

        /deep/.el-input__inner {
          height: 32px;
        }
      }
    }
    .kucun_warp {
      margin-left: 15px;
      display: flex;
      align-items: center;
      .kucun_warp_input {
        width: 160px;
        height: 32px;
        /deep/.el-input__inner {
          height: 32px;
        }
      }
    }
  }
  // 第二行的样式
  .second_select_warp {
    margin-top: 8px;
    display: flex;
    align-items: center;
    span {
      width: 40px;
      font-size: 16px;
      text-align: center;
    }
    // .many_select_warp {
    .el-select {
      width: 160px;
      height: 32px;
      margin-right: 17px;
      /deep/ .el-input--suffix {
        height: 32px;
        .el-input__inner {
          height: 32px;
        }
        // 解决小图标箭头不居中的问题
        .el-input__icon {
          line-height: unset;
        }
      }
    }
    // }
    /deep/.el-input {
      width: 160px;
      height: 32px;
      .el-input__inner {
        height: 32px;
      }
    }
    /deep/.el-input-group__prepend {
      padding: 0 10px;
    }
  }
  // 时间样式
  .el-date-editor {
    width: 300px;
    height: 32px;
    /deep/ .el-range-separator {
      width: 8%;
      line-height: 25px;
    }
  }
  // 实际销量的样式
  .shijixiaoliang {
    width: 64px !important;
    margin-left: 16px;
    margin-right: 4px;
  }
  // 实际进量样式
  .shi_ji_jin_liang {
    width: 64px !important;
    margin-left: 30px;
    margin-right: 4px;
  }
  .block {
    display: flex;
    align-items: center;
    .demonstration {
      margin: 0 0px 0 34px;
    }
  }
  .inline {
    width: 100%;
    border: 1px solid #f6f6f6;
    margin: 16px 0;
  }
  // 第三区域的样式
  .three_button_warp {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    .left_button {
      .el-button {
        width: 80px;
        height: 32px;
      }
      .shaixuanxinghao_btn {
        width: 108px;
        height: 32px;
      }
    }
    .right_button {
      .el-radio {
        margin-right: 12px;
      }
    }
  }
  /deep/.el-input-group__prepend {
    padding: 0 11px;
  }
  // 这个是修改日期小图标不居中的问题
  /deep/.el-range__icon {
    line-height: 29px;
  }
}
</style>
